import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import {
  InputItem,
  Button,
  Picker,
  Flex,
  List,
} from '@ant-design/react-native';
import { useNavigation } from '@react-navigation/native';
import SearchResultPage from './SearchResultPage';

const styles = StyleSheet.create({
  searchBtn: { padding: 10 },
  marginStyle: {
    marginBottom: 5,
  },
  picker: { marginTop: 5 },
  departInput: {
    borderColor: '#a9a9a9',
    borderStyle: 'solid',
    borderWidth: 0.5,
    height: 40,
  },
});

function MalfunctionSearchPage() {
  const navigation = useNavigation();
  const [searchData, setSearchData] = useState({
    acno: '',
    ddfcNo: '',
    status: undefined,
    ATA: '',
    description: '',
    menutype: undefined,
  });

  const statusAll = [
    {
      label: 'all',
      value: '0',
    },
    {
      label: 'open',
      value: '1',
    },
    {
      label: 'close',
      value: '2',
    },
  ];
  const type = [
    {
      label: '保留故障',
      value: '1',
    },
    {
      label: '保留缺陷',
      value: '2',
    },
  ];
  const handleSearchData = async (item) => {
    navigation.navigate(SearchResultPage.routeName, {
      acno: item.acno,
      status: item.status,
      menutype: item.menutype,
      desc: item.description,
      ddfcNo: item.ddfcNo,
      ata: item.ATA,
    });
  };

  return (
    <View>
      <Flex style={{ height: 45 }}>
        <Flex.Item style={styles.marginStyle}>
          <Picker
            data={type}
            cols={1}
            value={searchData.menutype}
            onChange={(val) => {
              setSearchData({ ...searchData, menutype: val[0] });
            }}
          >
            <List.Item arrow="down" style={{ fontSize: 15 }}>
              保留单类型
            </List.Item>
          </Picker>
        </Flex.Item>
      </Flex>
      <Flex style={{ height: 45 }}>
        <Flex.Item style={styles.marginStyle}>
          <Picker
            data={statusAll}
            value={searchData.status}
            cols={1}
            onChange={(val) => {
              setSearchData({ ...searchData, status: val[0] });
            }}
          >
            <List.Item arrow="down" style={{ fontSize: 15 }}>
              保留单状态
            </List.Item>
          </Picker>
        </Flex.Item>
      </Flex>
      <Flex>
        <Flex.Item style={styles.marginStyle}>
          <InputItem
            value={searchData.acno}
            style={styles.departInput}
            onChange={(val) => {
              setSearchData({ ...searchData, acno: val });
            }}
          >
            <Text style={{ fontSize: 15 }}>机号</Text>
          </InputItem>
        </Flex.Item>
        <Flex.Item style={styles.marginStyle}>
          <InputItem
            value={searchData.ddfcNo}
            style={styles.departInput}
            onChange={(val) => {
              setSearchData({ ...searchData, ddfcNo: val });
            }}
          >
            <Text style={{ fontSize: 15 }}>保留单编号</Text>
          </InputItem>
        </Flex.Item>
      </Flex>
      <Flex>
        <Flex.Item style={styles.marginStyle}>
          <InputItem
            value={searchData.description}
            style={styles.departInput}
            onChange={(val) => {
              setSearchData({ ...searchData, description: val });
            }}
          >
            <Text style={{ fontSize: 15 }}>故障描述</Text>
          </InputItem>
        </Flex.Item>
        <Flex.Item style={styles.marginStyle}>
          <InputItem
            value={searchData.ATA}
            style={styles.departInput}
            onChange={(val) => {
              setSearchData({ ...searchData, ATA: val });
            }}
          >
            <Text style={{ fontSize: 15 }}>ATA</Text>
          </InputItem>
        </Flex.Item>
      </Flex>
      <Flex>
        <Flex.Item style={styles.marginStyle}>
          <Button
            style={styles.searchBtn}
            type="primary"
            onPress={() => {
              handleSearchData(searchData);
            }}
          >
            搜索
          </Button>
        </Flex.Item>
      </Flex>
    </View>
  );
}

MalfunctionSearchPage.routeName = 'MalfunctionSearchPage';
MalfunctionSearchPage.permission = 'RMalfunctionSearch';
export default MalfunctionSearchPage;
